不會ajax也可以完成溝通

start

firebase被google買下後, 現在我們只要到 firebase 登入google帳號, 就可以開始新增專案

建立專案後, 選擇連結web app, 畫面會自動秀出程式碼片段, 我們把他和firebase的CDN連結先貼到 index.html 底部, 像這樣

<script src="https://www.gstatic.com/firebasejs/4.8.0/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

在左邊功能列選擇Auth, 我們先把匿名登入啟用, 方便測試

在左邊功能列選擇database,新增一個person欄位後,在規則那邊更改權限, 讓讀取和存入沒有限制

{
  "rules": {
    ".read": true,
    ".write": true,
  }
}

在Hello.vue測試, 先把database的實例化, ref參數為資料節點名稱, set方法存入資料, 格式當然是json

<q-btn color="red" @click="set">set something</q-btn>

set() {
    firebase.database().ref('person').set({
      jeff : {
        name: 'guest',
        age: 19
      }
    }).catch(function(error){
      console.error(error);
    });
}

回到firebase主控台, guest已經確實新增進去了

接著我們試試取資料, 新增一個button和 get method, 注意set和get都是非同步操作

<q-btn color="red" @click="get">get something</q-btn>

get() {
  firebase.database().ref('person').once('value').then(snapshot => {
    console.log(snapshot.val());
  });
}

按下按鈕, 確實得到person內的資料了

刪除資料, 就不附圖了

firebase.database().ref('person/jeff').remove()
.then(function(){
  console.log("刪除成功")
})